<template xmlns="http://www.w3.org/1999/html">
  <div style="width: 1100px;margin: 0 auto">
    <div style="width: 1000px;">
      <el-card class="title" style="border-radius: 4px ; padding: 24px;">
        <div>
          <span style="font-size: 20px ;margin: 0 10px">常用技能</span>
          <span style="font-size: 12px;font-weight: 200">点击添加您的常用技能</span>
          <el-button style="float: right">编辑</el-button>
        </div>
        <el-row style="margin-top: 20px">
          <el-button round>传说对决</el-button>
          <el-button round>英雄联盟</el-button>
          <el-button round>语音交流</el-button>
          <el-button round>APEX</el-button>
          <el-button round>无畏契约</el-button>
          <el-button round>基站峡谷</el-button>
          <el-button round>特战英豪</el-button>
        </el-row>
      </el-card>
      <el-card style="margin-top: 20px;">
        <el-menu mode="horizontal" :default-active="0" class="el-menu-demo" active-text-color="orange"
                 style="margin-bottom: 48px">
          <el-menu-item index="0">热门游戏</el-menu-item>
          <el-menu-item index="1">手机游戏</el-menu-item>
          <el-menu-item index="2">电脑游戏</el-menu-item>
          <el-menu-item index="3">主机游戏</el-menu-item>
          <el-menu-item index="4">语音陪伴</el-menu-item>
          <el-menu-item index="5">更多技能</el-menu-item>
        </el-menu>
        <div style="overflow:scroll ;height: 500px; overflow-x: hidden">
          <div>
            <div style="margin: 0 0 10px 0;padding: 8px;font-weight: 600;
            color:#636d86; font-size: 20px">热门游戏</div>
          <ul style="overflow: hidden;margin: 0 -16px; padding: 0;">
            <li style="width: 11%;float: left;margin-bottom: 18px;" v-for="item in hotGameArr">
              <div class="con" style="margin: 0 16px;overflow: hidden;border-radius: 10px">
                <div style="width: 81px;height: 81px;margin-bottom: 15px;">
                  <img :src="item.imgUrl" width="100%" height="100%">
                </div>
                <div style="text-align: center;font-size: 15px;color: #000;font-weight: normal;">
                  {{ item.name }}
                </div>
              </div>
            </li>
          </ul>
          </div>
          <div>
            <div style="margin: 0 0 10px 0;padding: 8px;font-weight: 600;
            color:#636d86; font-size: 20px">手机游戏</div>
            <ul style="overflow: hidden;margin: 0 -16px; padding: 0;">
              <li style="width: 11%;float: left;margin-bottom: 18px;" v-for="item in phoneGameArr">
                <div class="con" style="margin: 0 16px;overflow: hidden;border-radius: 10px">
                  <div style="width: 81px;height: 81px;margin-bottom: 15px;">
                    <img :src="item.imgUrl" width="100%" height="100%">
                  </div>
                  <div style="text-align: center;font-size: 15px;color: #000;font-weight: normal;">
                    {{ item.name }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div>
            <div style="margin: 0 0 10px 0;padding: 8px;font-weight: 600;
            color:#636d86; font-size: 20px">电脑游戏</div>
            <ul style="overflow: hidden;margin: 0 -16px; padding: 0;">
              <li style="width: 11%;float: left;margin-bottom: 18px;" v-for="item in cumGameArr">
                <div class="con" style="margin: 0 16px;overflow: hidden;border-radius: 10px">
                  <div style="width: 81px;height: 81px;margin-bottom: 15px;">
                    <img :src="item.imgUrl" width="100%" height="100%">
                  </div>
                  <div style="text-align: center;font-size: 15px;color: #000;font-weight: normal;">
                    {{ item.name }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div>
            <div style="margin: 0 0 10px 0;padding: 8px;font-weight: 600;
            color:#636d86; font-size: 20px">主机游戏</div>
            <ul style="overflow: hidden;margin: 0 -16px; padding: 0;">
              <li style="width: 11%;float: left;margin-bottom: 18px;" v-for="item in indexGameArr">
                <div class="con" style="margin: 0 16px;overflow: hidden;border-radius: 10px">
                  <div style="width: 81px;height: 81px;margin-bottom: 15px;">
                    <img :src="item.imgUrl" width="100%" height="100%">
                  </div>
                  <div style="text-align: center;font-size: 15px;color: #000;font-weight: normal;">
                    {{ item.name }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div>
            <div style="margin: 0 0 10px 0;padding: 8px;font-weight: 600;
            color:#636d86; font-size: 20px">语音陪伴</div>
            <ul style="overflow: hidden;margin: 0 -16px; padding: 0;">
              <li style="width: 11%;float: left;margin-bottom: 18px;" v-for="item in listArr">
                <div class="con" style="margin: 0 16px;overflow: hidden;border-radius: 10px">
                  <div style="width: 81px;height: 81px;margin-bottom: 15px;">
                    <img :src="item.imgUrl" width="100%" height="100%">
                  </div>
                  <div style="text-align: center;font-size: 15px;color: #000;font-weight: normal;">
                    {{ item.name }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div>
            <div style="margin: 0 0 10px 0;padding: 8px;font-weight: 600;
            color:#636d86; font-size: 20px">更多技能</div>
            <ul style="overflow: hidden;margin: 0 -16px; padding: 0;">
              <li style="width: 11%;float: left;margin-bottom: 18px;" v-for="item in moreArr">
                <div class="con" style="margin: 0 16px;overflow: hidden;border-radius: 10px">
                  <div style="width: 81px;height: 81px;margin-bottom: 15px;">
                    <img :src="item.imgUrl" width="100%" height="100%">
                  </div>
                  <div style="text-align: center;font-size: 15px;color: #000;font-weight: normal;">
                    {{ item.name }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "ListView",
  data() {
    return {
      hotGameArr: [{imgUrl: "/imgs/lol.webp", name: "英雄联盟"},
        {imgUrl: "/imgs/wzry.webp", name: "王者荣耀"},
        {imgUrl: "/imgs/a.webp", name: "语音陪聊"},
        {imgUrl: "/imgs/apex.webp", name: "APEX"},
        {imgUrl: "/imgs/i228ah3d.png", name: "激战峡谷"},
        {imgUrl: "/imgs/vvalorant.webp", name: "特战英豪"},
        {imgUrl: "/imgs/nz.webp", name: "小闹钟"},
        {imgUrl: "/imgs/xg.webp", name: "虚拟恋人"},
        {imgUrl: "/imgs/hg.webp", name: "好声音"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},],
      phoneGameArr: [{imgUrl: "/imgs/shug.webp", name: "传说对决"},
        {imgUrl: "/imgs/i228ah3d.png", name: "激战峡谷"},
        {imgUrl: "/imgs/pp.webp", name: "跑跑卡丁车"},
        {imgUrl: "/imgs/rz.webp", name: "我要活下去"},
        {imgUrl: "/imgs/pubg.webp", name: "绝地求生"},
        {imgUrl: "/imgs/vvalorant.webp", name: "特战英豪"},
        {imgUrl: "/imgs/nz.webp", name: "小闹钟"},
        {imgUrl: "/imgs/xg.webp", name: "虚拟恋人"},
        {imgUrl: "/imgs/hg.webp", name: "好声音"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
      ],
      cumGameArr:[ {imgUrl: "/imgs/i228ah3d.png", name: "激战峡谷"},
        {imgUrl: "/imgs/pp.webp", name: "跑跑卡丁车"},
        {imgUrl: "/imgs/rz.webp", name: "我要活下去"},
        {imgUrl: "/imgs/pubg.webp", name: "绝地求生"},
        {imgUrl: "/imgs/vvalorant.webp", name: "特战英豪"},
        {imgUrl: "/imgs/nz.webp", name: "小闹钟"},
        {imgUrl: "/imgs/xg.webp", name: "虚拟恋人"},
        {imgUrl: "/imgs/hg.webp", name: "好声音"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},
        {imgUrl: "/imgs/n.webp", name: "永杰无间"},],
      indexGameArr:[{imgUrl: "/imgs/i228ah3d.png", name: "激战峡谷"},],
      listArr:[ {imgUrl: "/imgs/pp.webp", name: "跑跑卡丁车"},
        {imgUrl: "/imgs/rz.webp", name: "我要活下去"},
        {imgUrl: "/imgs/pubg.webp", name: "绝地求生"},
        {imgUrl: "/imgs/vvalorant.webp", name: "特战英豪"},
        {imgUrl: "/imgs/nz.webp", name: "小闹钟"},
        {imgUrl: "/imgs/xg.webp", name: "虚拟恋人"},],
      moreArr:[   {imgUrl: "/imgs/wzry.webp", name: "王者荣耀"},
        {imgUrl: "/imgs/a.webp", name: "语音陪聊"},
        {imgUrl: "/imgs/apex.webp", name: "APEX"},]
    }
  },
}
</script>

<style scoped>
li {
  list-style-type: none;
}
</style>